<template>  
  <el-container >
    <el-header>Header</el-header>    
    <el-main>
      <el-container>
        <el-aside>
          <el-scrollbar>
           <el-menu :router="true" default-active="/" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
             <el-menu-item index="/">首页</el-menu-item>
             <el-menu-item index="/test">路由测试</el-menu-item>
           </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main>    
          <el-scrollbar>
            <router-view></router-view>            
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-main> 
    <el-footer>Footer</el-footer>
  </el-container>
</template>

<script>

export default {
  name: 'App',
  methods:{
      toHello(){
         alert('f');
      }
  }
}

</script>

<style slot-scope>
  .el-menu{
    border:none;
  }
  .el-container{
     padding: 0x;
     margin: 0px;
     height: 100%;
   }
  .el-header, .el-footer {
    background-color: #B3C0D1;
  }
  .el-aside{ 
    width: 200px!important;
    background:#545c64;
    color: white;
  }
  .el-main{
    padding: 0px;
    margin: 0px;
  }  
  .el-scrollbar{
     height: 100%;
  }
  .el-scrollbar .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-row .el-col div{
     height: 40px;
     background: #B3C0D1;
     margin:  10px;
     border-radius: 4px;
  }
  .alignDiv{
    display: flex;
    align-items: center;
  }
</style>
